<template>
	<view class="">
		<view class="search">
			<uni-search-bar :radius="100" @input="input" cancelButton="none"></uni-search-bar>
		</view>
		<view class="searchResult">
			<view class="result-item" v-for="(item,index) in searchLists" :key="index">
				<view class="item-content" @click="toDetail(item.goods_id)">
					{{item.goods_name}}
				</view>
				<view class="item-icon">
					<uni-icons type="arrowright" size="16"></uni-icons>
				</view>
			</view>
		</view>

		<view class="sHistory" v-show="kw===''">
			<view class="his-title">
				<view class="">
					搜索历史
				</view>
				<view class="">
					<uni-icons type="trash" size="16" @click="delHistory"></uni-icons>
				</view>
			</view>
			<!-- 历史内容 -->
			<view class="his-content">
				<view class="his-content-item" v-for="(item,index) in resHistories" :key="index"
					@click=gotoGoodsLists(item)>
					{{item}}
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: null,
				kw: '', //keywords 输入框输入的值
				searchLists: [],
				sHistory: [], //搜索历史
			};
		},
		onLoad() {
			this.sHistory = JSON.parse(uni.getStorageSync('sHistory') || '[]')
		},
		methods: {
			//点击历史记录 搜索这个历史
			gotoGoodsLists(item) {
				this.input(item);
			},
			// 点击删除，清空历史
			delHistory() {
				let that = this;
				uni.showModal({
					content: '确定删除搜索历史吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定', that.sHistory);
							that.sHistory = []
							console.log('this.sHistory', that.sHistory)
							// 删除本地存储
							uni.setStorageSync('sHistory', '[]');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 点击搜索结果 跳转该商品详情页
			toDetail(goodsid) {
				uni.navigateTo({
					url: `../goods_detail/goods_detail?goods_id=${goodsid}`
				})
			},
			input(e) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					console.log(e)
					this.kw = e;
					this.getSearch();
					if (e.trim() !== '') {
						// 判断是否已有历史记录 和控制历史记录的数组长度  这里使用ES6 set方法更加方便
						if (this.sHistory.length < 10) {
							for (let i in this.sHistory) {
								if (this.sHistory[i] == e) {
									console.log('已有历史', this.sHistory)
									return
								}
							}
							this.sHistory.push(e);
						} else {
							for (let i in this.sHistory) {
								if (this.sHistory[i] == e) {
									console.log('已有历史', this.sHistory)
									return
								}
							}
							this.sHistory.splice(0, 1)
							this.sHistory.push(e);
						}
					}
					// 把搜索历史存到本地
					uni.setStorageSync('sHistory', JSON.stringify(this.sHistory));
				}, 500)
			},
			async getSearch() {
				if (this.kw) { //判断kw是否为空 
					const {
						data: res
					} = await uni.$http.get(`/api/public/v1/goods/qsearch?query=${this.kw}`)
					if (res.meta.status !== 200) return uni.$showMsg();
					this.searchLists = res.message;
					// console.log(this.searchLists)
				} else { //如果为空 清空数组
					this.searchLists = [];
				}
			}
		},
		computed: {
			resHistories() {
				return [...this.sHistory].reverse()
			}
		}
	}
</script>

<style lang="scss">
	// 搜索历史
	.his-content-item {
		display: inline-block;
		padding: 10rpx 20rpx;
		border-radius: 40rpx;
		background-color: #f7f7f7;
		margin: 10rpx;
	}

	.sHistory {
		padding: 20rpx;

		.his-title {
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #efefef;
			line-height: 80rpx;
		}
	}




	.searchResult {
		width: 100%;
	}

	.result-item {
		width: 95%;
		margin: 0 auto;
		border-bottom: 2rpx solid #efefef;
		display: flex;
		line-height: 100rpx;
		font-size: 28rpx;

		.item-content {
			width: 90%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.item-icon {
			flex: 1;
			text-align: right;
		}
	}


	.search {
		width: 100%;
		height: 100rpx;
		background-color: #4cc6aa;
		position: sticky;
		top: 0;
		z-index: 999;
		// input{
		// 	width: 90%;
		// 	height: 70rpx;
		// 	margin: 0 auto;
		// 	text-indent: 20rpx;
		// 	background-color: #FFFFFF;
		// 	border-radius: 18px;
		// }
	}
</style>
